<template>
   <div class="mod-config">
       <basic-container>
           <div class="boxsty zhiBiao">
               <el-row>
                 <el-col :span="24">
                     所属部门：{{deptname}}
                 </el-col>
               </el-row>
               <el-row :gutter="20">
                 <el-col :span="24">
                     <el-col :span='8'>
                        <!-- <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline">
                            <el-form-item label="姓名">
                                <el-input v-model="dataForm.jjMc" placeholder="姓名" style="width:100px" :clearable="true"></el-input>
                            </el-form-item>
                            <el-form-item label="工号">
                                <el-input v-model="dataForm.jjMc" placeholder="工号" style="width:100px" :clearable="true"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">筛选</el-button>
                            </el-form-item>
                         </el-form>-->
                         <div style="height:600px;overflow:auto;">
                             <el-tree
                                :data="treeOrgData"
                                node-key="id"
                                :default-expanded-keys="[1]"
                                :props="defaultProps"
                                 @node-click="handleNodeClick"
                                >
                            </el-tree>
                         </div>
                     </el-col>
                     <el-col :span="6">

                        <div class="flex" style="margin:20px 0">
                            <el-input v-model="listQuery.name" placeholder="请输入搜索用户" style="margin-right:10px"></el-input>
                            <el-button @click="btnSearch" type="primary" icon="el-icon-search">搜索</el-button>
                        </div>

                         <el-table
                           ref="usertable"
                            style="width: 100%;margin-top:10px"
                            :data="tableDataDept"
                            border
                            @selection-change="handleSelectionChange"
                            v-loading="dataListLoading">
                            <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                            <el-table-column
                                prop="username"
                                header-align="center"
                                align="center"
                                label="用户">
                            </el-table-column>
                            <el-table-column
                                prop="ryName"
                                header-align="center"
                                align="center"
                                label="姓名">
                            </el-table-column>
                         </el-table>
                     </el-col>
                     <el-col :span="2">
                         <div class="text-center" style="margin-top:10vh;">
                             <div>
                                 <el-button type="primary" @click="fnConfirmSelectedData"><i class="el-icon-d-arrow-right el-icon--right"></i></el-button>
                             </div>
                           <div>
                                <el-button style="margin-top:20px;" type="primary" @click="fnConfirmSelectedDataDelete"><i class="el-icon-d-arrow-left el-icon--left"></i></el-button>
                            </div>

                         </div>
                     </el-col>
                     <el-col :span="8">
                         <div style="overflow:hidden;margin-bottom:10px;">
                             <span>人员分组</span>
                             <div style="float:right">
<!--                                 <el-button type="primary">数据导入</el-button>-->
<!--                                 <el-button type="primary">数据导出</el-button>-->
                                 <el-button type="primary" plain @click="addFZ">添加分组</el-button>
                                 <el-button type="primary" plain @click="addLD">添加领导</el-button>
                                 <el-button type="danger" @click="deleteBatch">删除分组</el-button>
                             </div>
                         </div>
                         <el-table
                           ref="fzTable"
                            :data="tableData"
                            style="width: 100%;margin-bottom: 20px;"
                            row-key="id"
                            :show-header="false"
                            border
                            default-expand-all
                            highlight-current-row
                            @row-click='handleclick'
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                           <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                            <el-table-column
                            prop="name"
                            label="姓名"
                            sortable
                            width="180">
                            <template slot-scope="scope">
                                <span>
                                    <span v-if="scope.row.children">{{scope.row.name}}({{scope.row.children.length}}人)</span>
                                    <span v-else>{{scope.row.name}}</span>
                                </span>
                            </template>
                            </el-table-column>
                            <el-table-column
                            prop="lingdaoName"
                            label="领导">
                            </el-table-column>
                        </el-table>
                       <div class="avue-crud__pagination">
                         <el-pagination
                           @size-change="sizeChangeHandle"
                           @current-change="currentChangeHandle"
                           :current-page="pageIndex"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="pageSize"
                           :total="totalPage"
                           background
                           layout="total, sizes, prev, pager, next, jumper">
                         </el-pagination>
                       </div>
                     </el-col>
                 </el-col>
               </el-row>
           </div>
         <el-dialog title="添加分组" :close-on-click-modal="false" :visible.sync="fzvisible" width="20vw" center append-to-body>
           <div style="height: 10vh">
             <el-row>
               <el-form :model="dataForm"  ref="dataFormRef" label-width="80px">
                 <el-form-item label="分组名称" prop="name">
                   <el-input v-model="dataForm.name" placeholder="分组名称" ></el-input>
                 </el-form-item>
               </el-form>
             </el-row>
           </div>
           <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="savefenzu()">保存</el-button>
            <el-button type="primary" plain @click="fzvisible = false">关闭</el-button>
          </span>
         </el-dialog>
       </basic-container>
   </div>

</template>

<script>
import {fayuetree} from '@/api/hetongrenwu/zhongdian/renwuchuangjian'
import {getFzPage,saveFZ,savegourp,deleteBatch,deleteGroup, saveLD} from '@/api/hetongrenwu/zhongdian/renyuanfenzu'
import { fetchList } from '@/api/admin/user'
import { getObj } from '@/api/admin/dept'
import {mapGetters} from 'vuex'
export default {
    data(){
        return{
          qjDeptId: '', //全局部门id
          qjGzId: "", //全局规则id
            dataForm:{},
            treeOrgData:[],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            selectedTreeData:[],
            confirmTreeData:[],
            tableData:[],
           /* tableData:[
                {
                id: 1,
                name: '分组一',
                address: '20211111'
                }, {
                id: 2,
                name: '分组二',
                address: '2321000'
                }, {
                id: 3,
                name: '分组三',
                address: '214500',
                children: [{
                    id: 31,
                    name: '王小虎2',
                    address: '541200'
                    }, {
                    id: 32,
                    name: '王小虎3',
                    address: '541200'
                }]
                }, {
                id: 4,
                name: '分组四',
                address: '478512'
                }
            ],*/
            dataList:[],
            dataListLoading:false,
            form:{},
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            page: {
              total: 0, // 总页数
              currentPage: 1, // 当前页数
              pageSize: 20, // 每页显示多少条,
              isAsc: false // 是否倒序
            },
          tableDataDept: [],
          listQuery: {
            name: ''
          },
          deptname:'',
          fzvisible:false,
          selectfzvisible:false
        }
    },
  created() {
    this.getUserDept();
    this.getList();
    this.getFenZuList();
  },
  computed:{
      ...mapGetters({
      userInfo:'userInfo'
    })
  },
    methods:{
      addLD(){
        var dataFZ = this.$refs.fzTable.selection
        if(dataFZ.length == 0){
          this.$message.error("请至少选择一个用户！");
          return;
        }
        var data=this.$refs.usertable.selection;
        if(data.length == 0){
          this.$message.error("请至少选择一个领导！");
          return;
        }
        if(data.length > 1){
          this.$message.error("只能选择一个领导！");
          return;
        }
        if(data.length > 0){
          for (var i = 0; i < data.length; i++) {
            if(dataFZ[i].children){
              this.$message.error("不能选择分组！");
              return
            }
          }
        }
        saveLD(Object.assign({
            userjson:JSON.stringify(dataFZ),
            ldId: data[0].userId,
            ldName: data[0].ryName
          })).then(res => {
            this.$message.success("添加成功！");
            this.getFenZuList();
        })
      },
      getFenZuList(page, params) {
        this.tableloading = true;
        getFzPage(Object.assign({
          current: this.pageIndex,
          size: this.pageSize
        })).then(response => {
          this.tableData = response.data.data.records
          this.totalPage = response.data.data.total
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      getUserDept(){
        getObj(this.userInfo.deptId).then(res => {
          this.deptname=res.data.data.name
        })
      },
        //选中某一行
        handleclick(row, column, event){
            //console.log("某行:"+JSON.stringify(row))
        },
        getList() {
          fayuetree(this.listQuery).then(response => {
            this.treeOrgData = response.data.data
          })
        },
          //多选
        handleSelectionChange(val) {

        },
        //树结构选中的数据
        handleNodeClick(data){
          this.page.currentPage = 1
          this.qjDeptId = data.id;
          this.getPersons(this.page, {
            deptId: data.id
          })
        },
      getPersons(page, params) {
        this.tableloading = true;

        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm, this.zdySearchForm)).then(response => {
          // this.list = response.data.data.records
          this.tableDataDept = response.data.data.records

          this.page.total = response.data.data.total
          this.tableloading = false;
          ////console.log(this.tableDataDept);
        }).catch(err => {
          this.tableloading = false;
        })
      },
      btnSearch() {
        let param = {
          deptId: this.qjDeptId
        }

        if (this.listQuery.name.trim() !== '') {
          param['username'] = this.listQuery.name.trim();
          param['ryName'] = this.listQuery.name.trim();
        }
        this.getPageUsers(param);
      },
      getPageUsers(vm) {
        if (vm) {
          this.getPersons(this.page, vm)
        } else {
          this.getPersons(this.page, {
            deptId: this.qjDeptId
          })
        }
      },
        //确定选择选中得机构
        fnConfirmSelectedData(){
          var data=this.$refs.usertable.selection;
          if(data.length==0){
            this.$message.error("请至少选择一个用户！");
            return;
          }
          var selectFzdata=this.$refs.fzTable.selection;
          if(selectFzdata.length==0){
            this.$message.error("请选择一个分组！");
            return;
          }
          if(selectFzdata.length>1){
            this.$message.error("只能选择一个分组！");
            return;
          }
          if(selectFzdata.length == 1 && selectFzdata[0].children == undefined){
            this.$message.error("只能选择分组，不能选择用户！");
            return;
          }
          savegourp(Object.assign({
            userjson:JSON.stringify(data),
            fenzuId: selectFzdata[0].id,
            fenzuName: selectFzdata[0].name
          })).then(response => {
            this.$message.success("保存成功！");
            this.selectfzvisible=false
            this.getFenZuList();
          })
        },
        fnConfirmSelectedDataDelete(){
          var data = this.$refs.fzTable.selection;
          if(data.length == 0){
            this.$message.error("请至少选择一个用户！");
            return;
          }
          if(data.length > 0){
            for (var i = 0; i < data.length; i++) {
              if(data[i].children){
                this.$message.error("不能选择分组删除！");
                return
              }
            }
          }
          deleteGroup(data).then(response => {
            this.$message.success("删除成功！");
            this.selectfzvisible=false
            this.getFenZuList();
          })
        },
      addFZ(){
        this.fzvisible=true
      },
      savefenzu(){
        saveFZ(this.dataForm).then(res => {
          this.$message.success("保存成功！");
          this.fzvisible=false
          this.getFenZuList();
        })
      },
      deleteBatch(){
        var data=this.$refs.fzTable.selection;
        if(data.length==0){
          this.$message.error("请至少选择一个分组！");
          return;
        }
        var ids=[];
        for(var i=0;i<data.length;i++){
          ids.push(data[i].id)
        }
        var idsStr=ids.join(',')
        this.$confirm('是否要删除分组吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return deleteBatch({ids:idsStr})
        }).then(data => {
          this.$message.success('删除成功')
          this.getFenZuList();
        })
      }
    }
}
</script>

<style>

</style>
